<template>
  <view class="filter-search-container">
    <filter-aside></filter-aside>
    <nav-bar></nav-bar>
    <goods-list
      class="goods-list"
      v-if="goodsList.length"
      :goodsList="goodsList"
    ></goods-list>
    <!-- <u-empty v-else mode="search"> </u-empty> -->
  </view>
</template>

<script>
import GoodsList from '../../components/GoodsList'
import { mapState } from 'vuex'
export default {
  name: 'filter-search',
  data() {
    return {
      goodsList: [], // 商品列表
      pageNo: 1, // 当前页码
      limit: 8, // 一页数量
      isReachBottom: true, // 是否还可触底加载
    }
  },
  methods: {
    // 获取商品列表
    async getGoodsList() {
      try {
        const { limit, pageNo } = this
        const skip = limit * (pageNo - 1)
        const params = JSON.stringify(this.filterSearchParams)
        uni.showLoading({})
        const goodsListData = await this.$get(
          `/1.1/classes/goods?where=${params}&limit=8&skip=${skip}`
        )
        uni.stopPullDownRefresh()
        uni.hideLoading()
        // 合并数据
        this.goodsList = [...this.goodsList, ...goodsListData.results]
        if (goodsListData.results.length === 0) {
          uni.showToast({
            title: '暂没有数据',
            duration: 2000,
            icon: 'none',
          })
        }
        if (goodsListData.results.length === 0 && this.goodsList.length) {
          uni.showToast({
            title: '这回真没了',
            duration: 2000,
            icon: 'none',
          })
          this.isReachBottom = false
        }
      } catch (e) {
        console.log(e)
      }
    },
    // 触底更新商品列表
    updateGoodsList() {
      this.pageNo++
      this.getGoodsList()
    },
  },
  computed: {
    ...mapState('filterSearch', ['filterSearchParams']),
  },
  components: {
    'goods-list': GoodsList,
  },
  onLoad() {
    this.getGoodsList()
  },
  onReachBottom() {
    this.isReachBottom && this.updateGoodsList()
  },
}
</script>

<style lang="scss">
.goods-list {
  height: calc(100vh - 120rpx);
}
</style>
